<template>
  <div class="app">
    <div class="total">
      <div class="container">
        <div @click="okk">
          <div class="icon"><i class="iconfont icon-dingwei"></i></div>
          <div class="text">{{city}}</div>
        </div>
        <div class="detail">
          <div class="info">
            <i
              class="iconfont icon-fabu"
              @click="publishArticle"
            ></i>
            <i
              class="iconfont icon-add_circle"
              @click="applyPosition"
            ></i>
          </div>
        </div>
      </div>
      <!-- 搜索栏 -->
      <search></search>
      <!-- 轮播图 -->
      <my-banner></my-banner>
      <!-- 静态菜单 -->
      <my-menus></my-menus>

      <div class="sky">
        <div
          class="up"
          v-if="role =='1'"
        >
          <div
            class="medic-visit"
            @click="medicVisit"
          >
            <i class="iconfont icon-jia"></i>
            <div class="text">医护上门</div>
          </div>
          <div
            class="hospial-recommend"
            @click="onlineInquery"
          >
            <i class="iconfont icon-yisheng"></i>
            <div class="text">在线问诊</div>
          </div>
        </div>
        <div class="down">
          <div
            class="online-inquery"
            @click="hospialRecommend"
          >
            <i class="iconfont icon-yiyuan"></i>
            <div class="text">医院推荐</div>
          </div>
          <div
            class="refer-nearby"
            @click="referNearby"
          >
            <i class="iconfont icon-yaodianguanli"></i>
            <div class="text">附近药店</div>
          </div>
        </div>
      </div>

      <div class="family">
        <img
          class="image"
          alt="famliy"
          src="@/assets/images/family.png"
        >
      </div>
    </div>
    <my-nav></my-nav>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import MyNav from "@/components/MyNav";
import Search from "@/components/search";
import MyBanner from "@/components/bannar";
import MyMenus from "@/components/menus";
export default {
  data() {
    return {
      // 在主页拿到角色
      role: this.$store.getters["user/role"],
    };
  },
  methods: {
    medicVisit() {
      this.$router.push({
        name: "medicVisit",
      });
    },
    hospialRecommend() {
      this.$router.push({
        name: "hospialRecommend",
      });
    },
    onlineInquery() {
      this.$router.push({
        name: "onlineInquery",
      });
    },
    referNearby() {
      this.$router.push({
        name: "referNearby",
      });
    },
    publishArticle() {
      this.$router.push({ name: "publicArticle" });
    },
    applyPosition() {
      MessageBox({
        title: "提示",
        message: "你要申请职位认证吗?",
        showCancelButton: true,
      });
    },
  },
  components: {
    MyNav,
    Search,
    MyBanner,
    MyMenus,
  },
  created() {},
};
</script>

<style scoped>
.app {
  height: 50%;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  font-size: 0.45rem;
}
.total {
  height: 90%;
  width: 100%;
}
.app .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5% 5% 0 5%;
}
.app .container .icon .iconfont {
  font-size: 0.65rem !important;
}
.app .location {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app .location .icon .iconfont {
  font-size: 0.64rem;
  color: rgb(219, 140, 37);
  font-size: 0.65rem !important;
}
.app .location .detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app .detail .info .iconfont {
  padding: 4%;
  margin-right: 10%;
  color: rgb(214, 178, 125);
  font-size: 0.65rem !important;
}
/* 头部右边图标 */
.detail .info .iconfont {
  font-size: 0.65rem !important;
}

/*四个模块 */
.sky {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(255, 255, 255);
}
.sky .up {
  margin: 5%;
}
.sky .down {
  margin: 5%;
}
.sky .iconfont {
  font-size: 0.55rem;
  margin: 35%;
  color: #96d596;
}
.up .medic-visit {
  margin-top: 5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding: 0.25rem;
}
.up .hospial-recommend {
  margin-top: 5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding: 0.25rem;
}
.down .online-inquery {
  margin-top: 5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding: 0.25rem;
}
.down .refer-nearby {
  margin-top: 5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding: 0.25rem;
}
.family {
  text-align: center;
}
.image {
  width: 85%;
  height: 40%;
  border-radius: 20px;
  margin-bottom: 1.55rem;
  margin-top: 0.15rem;
}
</style>
